<template>
  <el-container style="padding: 15px">
    <el-form size="medium" label-width="70px">
      <el-row type="flex" :gutter="20">
        <el-col :span="8">
          <el-button type="primary" size="medium" icon="el-icon-notebook-1" @click="gotolink">报告生成系统</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-container>
</template>

<script>
export default {
  name: 'Index',
  methods: {
    gotolink() {
      const params = {
        username: 'yewu',
        password: '123456'
      }
      this.openPostWindow('http://39.107.28.246:6688/zqw/a/login', params, 'DetailRunTime')
    },

    openPostWindow(url, data, name) {
    // 创建 form 表单
      const tempForm = document.createElement('form')
      tempForm.id = 'tempForm'
      tempForm.action = url
      tempForm.method = 'post'
      // tempForm.enctype = 'multipart/form-data';
      tempForm.target = name
      // 创建 用户名输入框
      const username = document.createElement('input')
      username.type = 'hidden'
      username.name = 'username'
      username.value = data.username
      // 创建 密码输入框
      const password = document.createElement('input')
      password.type = 'hidden'
      password.name = 'password'
      password.value = data.password
      // 将用户名和密码输入框插入 form 表单
      tempForm.appendChild(username)
      tempForm.appendChild(password)
      // 将 form 表单插入 body
      document.body.appendChild(tempForm)
      // 增加提交监听 处理浏览器的兼容性
      if (window.attachEvent) {
        tempForm.attachEvent('onsubmit', () => { window.open(url, name) })
      } else if (window.addEventListener) {
        tempForm.addEventListener('onsubmit', () => { window.open(url, name) })
      }
      // 触发监听 处理浏览器的兼容性
      if (tempForm.fireEvent) {
        tempForm.fireEvent('onsubmit')
      } else {
        const evt = document.createEvent('HTMLEvents')
        evt.initEvent('onsubmit', true, true)
        tempForm.dispatchEvent(evt)
      }
      // form 表单提交事件
      tempForm.submit()
      // 从 body 中移除 form 表单
      document.body.removeChild(tempForm)
    }
  }
}
</script>

<style scoped>
  .el-button{
    width: 150px;
    height: 150px;
  }
</style>
